<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Home.Master" Inherits="System.Web.Mvc.ViewPage" %>

<asp:Content ID="Content2" ContentPlaceHolderID="Title" runat="server">
    MonthCalendar Sample
</asp:Content>

<asp:Content ID="Content3" ContentPlaceHolderID="HeadCustom" runat="server">

    <link rel="stylesheet" href= "../../Content/jMonthcore.css" type="text/css" />
	<link rel="stylesheet" href= "../../Content/cupertino/jquery-ui.cupertino.css" type="text/css" />
    <script src="<%=Url.Content("~/JS/jquery-1.3.2.js")%>" type="text/javascript"></script>     		
    <script src="<%=Url.Content("~/JS/jqueryui/1.7.1/jquery-ui.js")%>" type="text/javascript"></script>   
  <%--  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js"></script>
--%>    <script src="../../JS/jMonthCalendar.js" type="text/javascript"></script>
	<style type="text/css" media="screen">
		#jMonthCalendar .Meeting { background-color: #DDFFFF;}
		#jMonthCalendar .Birthday { background-color: #DD00FF;}
		#jMonthCalendar #Event_3 { background-color:#0000FF; }
	</style>
	
    <script type="text/javascript">
        $().ready(function() {
            var options = {
                onMonthChanging: function(dateIn) {
                    //this could be an Ajax call to the backend to get this months events
                    //                    var events = [
                    //                						{ "EventID": 101, "StartDateTime": "new Date(2009, 9, 2)", "EndDateTime": "new Date(2009, 9, 3)", "Title": "10:00 pm - EventTitle6", "URL": "#", "Description": "This is a sample event description" },
                    //                                        { "EventID": 102, "StartDateTime": "new Date(2009, 9, 29)", "EndDateTime": "new Date(2009, 9, 30)", "Title": "10:00 pm - EventTitle6", "URL": "#", "Description": "This is a sample event description" }
                    //                                  ];
                    //$.jMonthCalendar.AddEvents(events);//.ReplaceEventCollection(events);
                $.getJSON("<%=Url.Content("/Calendar/MonthInfo/") %>" + dateIn.getFullYear() + "/" + (dateIn.getMonth() + 1), null, function(events) {
                        var result = events.Events;
                        $.jMonthCalendar.ReplaceEventCollection(result);
                    });
                    return true;
                },
                onEventLinkClick: function(event) {
                    alert("event link click");
                    return true;
                },
                onEventBlockClick: function(event) {
                    alert("block clicked");
                    return true;
                },
                onEventBlockOver: function(event) {
                    alert(event.Title + " - " + event.Description);
                    return true;
                },
                onEventBlockOut: function(event) {
                    return true;
                },
                onDayLinkClick: function(date) {
                    alert(date.toLocaleDateString());
                    return true;
                },
                onDayCellClick: function(date) {
                    alert(date.toLocaleDateString());
                    return true;
                } //   ,
                //                onMonthChanging: function(dateIn) {
                //                    var events = [
                //						{ "EventID": 1, "StartDateTime": "new Date(2009, 10, 2)", "EndDateTime": "new Date(2009, 10, 3)", "Title": "10:00 pm - EventTitle6", "URL": "#", "Description": "This is a sample event description" },
                //                        { "EventID": 2, "StartDateTime": "new Date(2009, 10, 29)", "EndDateTime": "new Date(2009, 10, 30)", "Title": "10:00 pm - EventTitle6", "URL": "#", "Description": "This is a sample event description" }
                //                   ];
                //                }
            };


            var events = [{ "EventID": 1, "StartDateTime": "new Date(2009, 5, 29)", "EndDateTime": "new Date(2009, 6, 3)", "Title": "10:00 pm - EventTitle1", "URL": "#", "Description": "This is a sample event description" },
							{ "EventID": 6, "StartDateTime": "new Date(2009, 5, 29)", "EndDateTime": "new Date(2009, 6, 3)", "Title": "10:00 pm - EventTitle6", "URL": "#", "Description": "This is a sample event description" },
							{ "EventID": 7, "StartDateTime": new Date(2009, 5, 12), "Title": "10:00 pm - EventTitle7", "URL": "#", "Description": "This is a sample event description" },
							{ "EventID": 3, "StartDateTime": "2009-05-28T12:30:00.0000000", "Title": "This is a much longer title", "URL": "#", "Description": "This is a sample event description", "CssClass": "Meeting" },
							{ "EventID": 4, "StartDateTime": new Date(2009, 5, 13), "Title": "This is a much longer title", "URL": "#", "Description": "This is a sample event description", "CssClass": "Meeting" },
							{ "EventID": 5, "StartDateTime": "2009-06-03", "EndDateTime": "2009-06-14", "Title": "This is a much longer title", "URL": "#", "Description": "This is a sample event description", "CssClass": "Meeting" }
			];


            $.jMonthCalendar.Initialize(options, events);




            var extraEvents = [{ "EventID": 8, "StartDateTime": new Date(2009, 3, 11), "Title": "10:00 pm - EventTitle1", "URL": "#", "Description": "This is a sample event description", "CssClass": "Birthday" },
								{ "EventID": 9, "StartDateTime": new Date(2009, 3, 20), "Title": "9:30 pm - this is a much longer title", "URL": "#", "Description": "This is a sample event description", "CssClass": "Meeting" }
			];

            $("#Button").click(function() {
                $.jMonthCalendar.AddEvents(extraEvents);
            });

            $("#ChangeMonth").click(function() {
                $.jMonthCalendar.ChangeMonth(new Date(2009, 7, 7));
            });
        });
    </script>	
	
</asp:Content>

<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">

    <h2>JMonthCalendar</h2>

	<center>
		<div id="jMonthCalendar"></div>

		<button id="Button">Add More Events</button>

		<button id="ChangeMonth">Change Month to August 2009</button>
	</center>    

</asp:Content>



<asp:Content ID="Content4" ContentPlaceHolderID="Scripts" runat="server">
</asp:Content>
